<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>h5</title>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' chartset='utf-8'></script>
	</head>
	<body>
		<style>
			.chart{
				display:block;
				margin:50px auto;
			}
			.chart rect{
				fill:rgb(0,0,255);
			}
        	.chart text{
				color:rgb(255,255,255);
			}
			.chart .axis{
				fill:none;
				stroke-width:1px;
				stroke:rgb(0,0,0);
			}
        </style>
        <svg class='chart'>
        	
        </svg>
        <script type='text/javascript'>
			
			var data = [
				4,8,6,15,8,9
			] ;
			var margin = {
				left : 50 ,
				right : 10 ,
				top : 10 ,
				bottom : 30
			} ;
			var width = 500 ;
			var height = 300 ;
			var barWidth = width/data.length ;	
			
			var chart = d3.select('.chart').attr({
				'width': width + margin.left + margin.right ,
				'height':height + margin.top + margin.bottom
			}) ;
			
			
			var x = d3.scale.ordinal()
						.domain(data.map(function(val,i){ return i; }))
						.rangeRoundBands([0,width]) ;
						
			var y = d3.scale.linear()
				.domain([0,d3.max(data)]) 
				.range([height,0]) ;
			
			var bar = chart.selectAll('g').data(data)
						.enter().append('g') ;
			
			bar.attr({
				'transform' : function(d,i){
					return 'translate(' + (margin.left+i*barWidth) + ',0)' ;
				} 
				
			});
			var barMargin = 30 ;
			bar.append('rect').attr({
				'y' : function(d){
					return y(d)+margin.top;
				} ,
				height : function(d){
					return height-y(d);
				} ,
				width : barWidth - 2*barMargin ,
				'transform' : 'translate(' + barMargin + ',0)'
			});
			
			var xAxis = d3.svg.axis().scale(x).orient('bottom') ;
			var yAxis = d3.svg.axis().scale(y).orient('left') ;
			
			chart
				.append('g').attr({
					'class' : 'x axis' ,
					'transform' : 'translate(' + margin.left + ',' + (height+margin.top) + ")"
				}).call(xAxis) ; 
				
			chart
				.append('g').attr({
					'class' : 'y axis' ,
					'transform' : 'translate(' + margin.left + ','+ margin.top +')'
				}).call(yAxis) ;
			
        </script>
        
    </body>
</html>